import React from 'react'
import ReactDOM from 'react-dom'

// 自定义组件

class MyHeader extends React.Component {
  state = {
    msg: 'myheader Msg',
  }
  render() {
    return (
      <header>
        <h1>头部组件</h1>
      </header>
    )
  }
}

class App extends React.Component {
  state = {}
  DOMRef = React.createRef()
  ComRef = React.createRef()
  TOpRef = React.createRef()
  handleClick = () => {
    console.log(this.ComRef.current)
    console.log(this.DOMRef.current)
    console.log(this.TOpRef.current)
  }
  render() {
    return (
      <>
        <h1 ref={this.TOpRef}>非受控组件-ref</h1>
        <h2 ref={this.DOMRef}>副标题</h2>
        <MyHeader ref={this.ComRef}></MyHeader>
        <button onClick={this.handleClick}>获取ref对象</button>
      </>
    )
  }
}
ReactDOM.render(<App />, document.getElementById('root'))
